<template>
  <div id="echartsConfig" class="h-full">
    <a-spin :spinning="!loadComplate">
      <a-row>
        <a-col :span="20" style="padding: 0; background-color: #cad3db">
          <div
            class="panel panel-default"
            id="eip-echarts-panel"
            style="margin: 4px"
          >
            <div
              ref="eipContainer"
              class="eip-echarts-container"
              :style="{ height: height }"
              style="padding: 4px"
            ></div>
          </div>
        </a-col>

        <a-col :span="4" style="padding: 0; background-color: #cad3db">
          <div class="panel panel-default h-full" style="margin: 4px 4px 4px 0">
            <div class="panel-body option">
              <div
                id="report-echarts-option"
                class="beauty-scroll"
                :style="{ height: height }"
                style="overflow-y: scroll"
              >
                <a-collapse>
                  <a-collapse-panel key="1" header="工具栏">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>数据视图：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.feature.dataView.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>重置：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.feature.restore.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>数据缩放视图：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.feature.dataZoom.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>保存图片：</td>
                            <td>
                              <a-checkbox
                                v-model="
                                  option.toolbox.feature.saveAsImage.show
                                "
                              ></a-checkbox>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="2" header="图例">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>名称:</td>
                            <td>
                              <input
                                v-model="option.series[0].name"
                                type="text"
                                class="form-control"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>大小:</td>
                            <td>
                              <input
                                v-model="option.series[0].radius"
                                type="text"
                                class="form-control"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>水平对齐：</td>
                            <td>
                              <button
                                @click="option.legend.left = 'left'"
                                type="button"
                                :class="{
                                  active: option.legend.left == 'left',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-left"></a-icon>
                              </button>
                              <button
                                @click="option.legend.left = 'center'"
                                type="button"
                                :class="{
                                  active: option.legend.left == 'center',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-center"></a-icon>
                              </button>
                              <button
                                @click="option.legend.left = 'right'"
                                type="button"
                                :class="{
                                  active: option.legend.left == 'right',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-right"></a-icon>
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>排列方式：</td>
                            <td>
                              <button
                                @click="option.legend.orient = 'horizontal'"
                                type="button"
                                :class="{
                                  active: option.legend.orient == 'horizontal',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="column-width" />
                              </button>
                              <button
                                @click="option.legend.orient = 'vertical'"
                                type="button"
                                :class="{
                                  active: option.legend.orient == 'vertical',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="column-height" />
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.legend.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr></tr>
                          <tr>
                            <td>字体颜色：</td>
                            <td>
                              <eip-color
                                :value="option.legend.textStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.legend.textStyle.color = value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>
                          <tr>
                            <td>垂直对齐：</td>
                            <td>
                              <button
                                @click="option.legend.top = 'top'"
                                type="button"
                                :class="{ active: option.legend.top == 'top' }"
                                class="btn btn-default btn-xs"
                              >
                                上
                              </button>
                              <button
                                @click="option.legend.top = 'middle'"
                                type="button"
                                :class="{
                                  active: option.legend.top == 'middle',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                中
                              </button>
                              <button
                                @click="option.legend.top = 'bottom'"
                                type="button"
                                :class="{
                                  active: option.legend.top == 'bottom',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                下
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>格式化：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.series[0].label.formatter"
                              />
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="3" header="标题">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>标题内容：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.title.text"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>副标题：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.title.subtext"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.title.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>水平对齐：</td>
                            <td>
                              <button
                                @click="option.title.left = 'left'"
                                type="button"
                                :class="{ active: option.title.left == 'left' }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-left"></a-icon>
                              </button>
                              <button
                                @click="option.title.left = 'center'"
                                type="button"
                                :class="{
                                  active: option.title.left == 'center',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-center"></a-icon>
                              </button>
                              <button
                                @click="option.title.left = 'right'"
                                type="button"
                                :class="{
                                  active: option.title.left == 'right',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-right"></a-icon>
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>颜色：</td>
                            <td>
                              <eip-color
                                :value="option.title.textStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.title.textStyle.color = value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>
                          <tr>
                            <td>字体：</td>
                            <td>
                              <select
                                class="form-control"
                                v-bind:value="option.title.textStyle.fontFamily"
                                v-model="option.title.textStyle.fontFamily"
                              >
                                <option value="微软雅黑">微软雅黑</option>
                                <option value="宋体">宋体</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>字号：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.title.textStyle.fontSize"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.title.textStyle.fontSize =
                                        option.title.textStyle.fontSize + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.title.textStyle.fontSize =
                                        option.title.textStyle.fontSize - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>粗体：</td>
                            <td>
                              <button
                                v-on:click="
                                  option.title.textStyle.fontWeight == 'normal'
                                    ? (option.title.textStyle.fontWeight =
                                        'bold')
                                    : (option.title.textStyle.fontWeight =
                                        'normal')
                                "
                                type="button"
                                v-bind:class="{
                                  active:
                                    option.title.textStyle.fontWeight == 'bold',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <i class="fa fa-bold"></i>
                              </button>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="4" header="提示框">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.tooltip.show"
                              ></a-checkbox>
                            </td>
                          </tr>

                          <tr>
                            <td>提示类型：</td>
                            <td>
                              <select
                                class="form-control"
                                v-bind:value="option.tooltip.trigger"
                                v-model="option.tooltip.trigger"
                              >
                                <option value="item">类目</option>
                                <option value="axis">轴</option>
                              </select>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
import "../designer.css";
import Vue from "vue";
import { businessDataFormSource } from "@/services/system/zerocode/run/edit";
import { findById } from "@/services/system/datasource/edit";
export default {
  name: "report-unit-bar",
  data() {
    return {
      height: this.eipTableHeight() - 86 + "px",
      option: {
        title: {
          text: "环形图",
          subtext: "纯属虚构",
          show: true,
          left: "center",
          textStyle: {
            color: "#000000",
            fontSize: 18,
            fontFamily: "微软雅黑",
            fontWeight: "bold",
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          top: "top",
          show: true,
          textStyle: {
            color: "#000",
          },
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true },
            restore: { show: true },
            dataZoom: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            avoidLabelOverlap: false,
            label: {
              formatter: "{b}：{d}%",
            },
            radius: "50%",
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 310,
                name: "邮件营销",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 135,
                name: "视频广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
          },
        ],
      },

      echarts: null,
      loadComplate: false,
    };
  },
  props: {
    //数据源
    dataSource: {
      type: Object,
    },
  },
  mounted() {
    this.initEchart();
  },
  watch: {
    option: {
      handler: function (val, oldVal) {
        if (this.loadComplate) {
          this.echarts.setOption(val, true);
          this.$emit("change", val);
        }
      },
      deep: true,
    },
  },
  methods: {
    /**
     *
     */
    async initEchart() {
      if (!this.$echarts) {
        Vue.prototype.$echarts = window.echarts;
      }
      this.echarts = this.$echarts.init(this.$refs.eipContainer);
      if (this.dataSource.option) {
        this.option = this.dataSource.option;
      }
      //判断是否具有数据源
      await this.initLegend();
      await this.initValue();
      this.echarts.setOption(this.option, true);
      this.loadComplate = true;
    },

    /**
     * 初始化Legend
     */
    async initLegend() {
      var legend = this.dataSource.legend;
      var data = [];
      if (legend) {
        var result = await this.findDataSource(legend);
        result.forEach((item) => {
          data.push(item.name);
        });
      }
      this.option.legend.data = data;
    },

    /**
     * 初始化数据源
     */
    async initValue() {
      var value = this.dataSource.value;
      var sdata = [];
      if (value) {
        var datas = await this.findDataSource(value);
        datas.forEach((item) => {
          sdata.push({
            name: item.name,
            value: item.value,
          });
        });
      }
      this.option.series[0].data = sdata;
    },

    /**
     * 获取数据
     * @param {*} id
     */
    async findDataSource(id) {
      var dataSource = await findById(id);
      var result = [];
      if (dataSource.data.config) {
        var config = JSON.parse(dataSource.data.config);
        switch (config.type) {
          case "table":
            var tableData = await businessDataFormSource({
              dataSourceId: dataSource.data.dataSourceId,
              inParams: JSON.stringify(config.inParams),
            });
            result = tableData.data;
            break;
          case "view":
            var viewData = await businessDataFormSource({
              dataSourceId: dataSource.data.dataSourceId,
              inParams: JSON.stringify(config.inParams),
            });
            result = viewData.data;
            break;
          case "proc":
            break;
          case "interface":
            break;
          case "custom":
            result = JSON.parse(config.custom);
            break;
        }
      }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-collapse-content-box {
  padding: 0 !important;
}

/deep/ .ant-collapse-content {
  border-top: 0 !important;
}

/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 6px 16px !important;
  padding-left: 40px !important;
}

/deep/ .m-colorPicker .box {
  position: fixed !important;
}
</style>